<template>
  <div class="book-query">
    <!-- 面包屑区域 -->
    <BreadCrumb>图书查询</BreadCrumb>
    <div class="content">
      <!-- 卡片区域 -->
      <el-card>
        <!-- 搜索与添加区域 row(行)和 col(列) 是栅格布局-->
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input placeholder="Please input" size="large" v-model="input"  class="input-with-select" @keydown.enter="searchBook">
              <template #prepend>
                <el-select v-model="select" style="width: 150px">
                  <el-option label="图书编号" value="1" />
                  <el-option label="图书名称关键词" value="2" />
                  <el-option label="图书类别关键词" value="3" />
                  <el-option label="图书作者关键词" value="4" />
                </el-select>
              </template>
              <template #append>
                <el-button icon="el-icon-search" @click="searchBook"/>
              </template>
            </el-input>
          </el-col>


        </el-row>
        <!-- 借阅历史列表区域 -->
        <el-table :data="data" border stripe>
          <el-table-column type="index" label="#" align="center"></el-table-column>
          <el-table-column prop="id" label="图书编号" align="center" width="100px"/>
          <el-table-column prop="bookname" label="图书名称" align="center" width="150px" />
          <el-table-column prop="booktype" label="图书类别" align="center" width="100px" />
          <el-table-column prop="author" label="作者" align="center" width="100px" />
          <el-table-column prop="translator" label="译者" align="center" width="100px" />
          <el-table-column prop="publisher" label="出版社" align="center" width="170px" />
          <el-table-column prop="publish_time" label="出版时间" align="center" width="120px" />
          <el-table-column prop="price" label="价格" align="center" width="90px" />
          <el-table-column prop="stock" label="库存" align="center" width="90px" />

          <el-table-column label="操作" align="center">
            <!-- 作用域插槽，scope.row 可以拿到对应这一行的数据 (scope.$index, scope.row)-->
            <template #default="scope" >
                <el-button type="primary" size="default" @click="gotoBorrowBooks(scope.row)">借书</el-button>
                <el-button type="success" size="default"  @click="gotoBackBooks(scope.row)">还书</el-button>
            </template>
        </el-table-column>
        </el-table>
      </el-card>
    </div>


  </div>
</template>

<script setup>
import BreadCrumb from '@/components/common/BreadCrumb.vue'
import { ElMessageBox } from 'element-plus'
import { getAllBooks, getBooksByNameKey, getBooksByTypeKey, getBooksByAuthorKey, getBookById
} from '@/network/book.js'
import { onMounted, reactive, ref } from 'vue';
import { messageApi } from '@/api/global.js';
import { useRouter } from 'vue-router'

//* 变量声明
let data = ref([]) // 读者信息数据
const select = ref('1')  // 下拉选择
const input = ref('') // 文本输入框值 -- 
const router = useRouter()

//* 事件处理

// 获取所有读者信息
const getBooks = async () => {
  const { data: res} = await getAllBooks()
  // 处理时间
  res.data.forEach(item => {
    item.publish_time = new Date(item.publish_time).toLocaleDateString()
  })
  data.value = res.data
}

// 查询图书
const searchBook = async () => {
  // 图书编号查询
  if (select.value === "1") {
    if (input.value === '') return getBooks()
    const {data:res} = await getBookById(input.value)
    if (res.code !== 200) return messageApi('error', res.msg)
    data.value = []
    data.value.push(res.data)
  }
  // 图书名称查询
  if (select.value === "2") {
    const {data:res} = await getBooksByNameKey({bookNameKey: input.value})
    if (res.code !== 200) return messageApi('error', '查询失败！')
    data.value = res.data
  }
  // 图书类型查询
  if (select.value === "3") {
    const {data:res} = await getBooksByTypeKey({bookTypeKey: input.value})
    if (res.code !== 200) return messageApi('error', '查询失败！')
    data.value = res.data
  }
  // 图书作者查询
  if (select.value === "4") {
    const {data:res} = await getBooksByAuthorKey({bookAuthorKey: input.value})
    if (res.code !== 200) return messageApi('error', '查询失败！')
    data.value = res.data
  } 
}

// 前往图书借阅界面
const gotoBorrowBooks = (row) => {
  // 使用动态路由，将选中的图书id传入路由地址，然后借书组件就可以通过id查询图书信息
  router.push('/home/borrowbooks/' + row.id)
  
}

// 前往图书归还界面
const gotoBackBooks = (row) => {
  router.push('/home/backbooks/'+ row.id)
}


onMounted(() => {
  getBooks()
})

</script>

<style lang="less" scoped>
.book-query {
  height: 100%;
  width: 85%;
  background-color: #eaedf1;

}
.content {
  width: 100%;
  // height: 600px;
  margin: 0 15px;
  background: #fff;
  overflow: auto;
  width:  1300px;

  .el-card {
    width: 100%;
  }
  .el-table {
    width: 100%
  }
  .el-row {
    margin-bottom: 10px;
  }
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>